<template>
  <view class="result-container">
    <!-- 分页控制区域 -->
    <view class="pagination-controls" v-if="results.length > 0">
      <button 
        class="pagination-btn" 
        :disabled="currentPage === 1" 
        @click="prevPage"
      >
        上一页
      </button>
      <text class="page-indicator">
        第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
      </text>
      <button 
        class="pagination-btn" 
        :disabled="currentPage >= totalPages" 
        @click="nextPage"
      >
        下一页
      </button>
    </view>

    <!-- 结果列表 -->
    <view v-if="paginatedResults.length">
      <view v-for="(result, index) in paginatedResults" :key="index" class="result-item">
          <!-- 根据 testId 选择要渲染的组件 -->
          <sclTestResultVue v-if="result.testId == 1" :result="result" />
          <uclaTestResultVue v-else-if="result.testId == 2" :result="result" />
          <staiTestResultVue v-else-if="result.testId == 3" :result="result" />
          <text v-else class="error-message">无效的问卷类型</text>
        </view>
      </view>
  
    <view v-else class="empty-message">
      <u-empty text="暂无测试结果" mode="message"></u-empty>
    </view>

    <!-- 分页大小选择器 -->
    <view class="page-size-selector" v-if="results.length > 0">
      <text>每页显示：</text>
      <picker @change="onPageSizeChange" :value="pageSizeIndex" :range="pageSizeOptions">
        <view class="picker">{{ pageSize }} 条</view>
      </picker>
    </view>
    </view>
</template>

<script>
	import sclTestResultVue from '../../components/testResults/sclTestResult.vue';
	import uclaTestResultVue from '../../components/testResults/uclaTestResult.vue';
	import staiTestResultVue from '../../components/testResults/staiTestResult.vue';

	export default {
		components: {
		   sclTestResultVue,
		   uclaTestResultVue,
		   staiTestResultVue,
		  },
		data() {
			return {
      testId: 1,
      results: [],
      currentPage: 1,
      pageSize: 5,
      pageSizeIndex: 0,
      pageSizeOptions: [5, 10, 20, 50].map(num => `${num} 条`),
				componentMap: {
				        "1": "sclTestResultVue",
				        "2": "uclaTestResultVue",
				        "3": "staiTestResultVue"
			}
    };
		},
		computed: {
		    currentComponent() {
		      return this.componentMap[this.testId] || null;
    },
    // 计算分页后的结果
    paginatedResults() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.results.slice(start, end);
    },
    // 计算总页数
    totalPages() {
      return Math.ceil(this.results.length / this.pageSize);
		    }
		  },
  async onLoad(options) {
			this.testId = Number(options.testId || 1);
    await this.loadResults();
		},
		methods: {
    async loadResults() {
      try {
        const res = await uniCloud.callFunction({
          name: 'getMindTestResult',
          data: { testId: this.testId }
        });
        this.results = res.result.data || [];
        // 重置到第一页
        this.currentPage = 1;
      } catch (error) {
        console.error('加载结果失败:', error);
        uni.showToast({ title: '加载失败', icon: 'none' });
      }
    },
    // 上一页
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.scrollToTop();
      }
    },
    // 下一页
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.scrollToTop();
      }
    },
    // 修改每页显示数量
    onPageSizeChange(e) {
      const index = e.detail.value;
      this.pageSize = parseInt(this.pageSizeOptions[index]);
      this.pageSizeIndex = index;
      this.currentPage = 1; // 重置到第一页
    },
    // 滚动到顶部
    scrollToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    }
  }
};
</script>

<style>
.result-container {
  padding: 20px;
}

/* 分页控制样式 */
.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  gap: 15px;
}

.pagination-btn {
  padding: 8px 16px;
  background-color: #6c8eef;
  color: white;
  border-radius: 6px;
  font-size: 14px;
}

.pagination-btn:disabled {
  background-color: #cccccc;
  opacity: 0.6;
}

.page-indicator {
  font-size: 14px;
  color: #666;
}

/* 每页数量选择器 */
.page-size-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  font-size: 14px;
}

.picker {
  color: #6c8eef;
  padding: 5px 10px;
  border: 1px solid #6c8eef;
  border-radius: 4px;
  margin-left: 10px;
}

/* 结果项样式 */
.result-item {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e0e0e0; /* 添加实线边框 */
  border-radius: 12px; /* 圆角 */
  box-shadow: inset 0 0 8px rgba(0,0,0,0.05); /* 内阴影增加深度 */
  background-color: #f9f9f9; /* 浅背景色 */
  margin: 15px; /* 外间距 */
}

.error-message {
  display: block;
  text-align: center;
  margin: 20px;
  color: #999;
}

.empty-message {
  margin-top: 200rpx;
}
</style>
